<script setup lang="ts">
  import { ref } from "vue";
  import { init as initEcharts, ECharts } from "echarts";
  import order from "@/router/order";
  type nva = { name: string; value: number; }[];
  const
    ts = order.children.slice(1).map(e => e.meta.title),
    entity = ref<HTMLDivElement>(),
    es: ECharts[] = [],
    obs = new ResizeObserver(() => {
      es.forEach(e => e.resize());
    })
    ;
  async function init() {
    if (!entity.value) { return next(init); }
    es.splice(0);
    obs.observe(entity.value);
    const el = entity.value;
    const t: { name: string; value: number; }[] = [];
    for (let i = 1; i < 13; i++) {
      t.push({ name: `name${i}`, value: i });

    }
    // const r: { nums: nva; xfd: { label: string[], num: number[], money: number[]; }; } = await api.request({}, "orderIndex");
    // ts.forEach(e => {
    //   const c = r.nums.find(rn => rn.name == e);
    //   if (c) {
    //     c.value = parseInt(c.value);
    //   } else {
    //     r.nums.push({ name: e, value: 0 });
    //   }
    // });
    es.push(initEcharts(el.children[0].children[0] as any));
    es.push(initEcharts(el.children[0].children[1] as any));
    es.push(initEcharts(el.children[1] as any));
    es[0].setOption({
      title: {
        text: '单据分布图',
        subtext: '全部',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '详细数据',
          type: 'pie',
          radius: '50%',
          data: t,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
    es[1].setOption({
      title: {
        text: '消费单',
        subtext: '月份数量占比',
        left: 'center'
      },
      tooltip: { trigger: 'item' },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '详细数据',
          type: 'pie',
          radius: '50%',
          data: t,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
    es[2].setOption({
      title: {
        text: '消费金额走势图',
        subtext: '全部',
        left: 'center'
      },
      xAxis: { type: 'category', data: t.map(e => e.name) },
      yAxis: { type: 'value' },
      tooltip: { trigger: 'item' },
      series: [
        {
          data: t.map(e => e.value),
          type: 'line',
          smooth: true
        },
      ]
    });
  }
  init();
</script>
<template>
  <div class="home y fg1" ref="entity">
    <div class="all x zb">
      <div class="w48" />
      <div class="w48" />
    </div>
    <div class="xfd" />
  </div>
</template>
<style lang="scss" scoped>
  .home {
    position: relative;
    >.all {
      width: 100%;
      height: 50%;
      flex-shrink: 0;
      >div {
        height: 100%;
      }
    }
    .xfd {
      width: 100%;
      flex-grow: 1;
    }
  }
</style>